<template>
  <div class="fybgadd" v-if="!loading" v-loading="loading" element-loading-text="拼命加载中">
    <div>
      <el-button type="primary" v-print="'#printMeP'">下载</el-button>
    </div>
    <div class="a4">
      <div>
        <div class="a4-title">封样报告</div>
        <div class="a4-model">
          <!-- <div class="a4-model-content">
            <div class="a4-model-content-one">
              <el-image
                class="a4-model-content-one-image"
                :src="wear_image[0]"
                fit="contain"
                :preview-src-list="wear_image"
              ></el-image>
            </div>
            <div class="a4-model-content-two">
              <div class="a4-model-content-two-top">
                <div>{{ type_no }}</div>
                <div>品名:{{ type_name }}</div>
              </div>
              <div class="a4-model-content-two-bottom">
                <div>{{ colour_number }}({{ colour }})</div>
                <div>{{ factory_name }}</div>
                <div>更新时间：{{ createtime }}</div>
              </div>
            </div>
          </div> -->
          <div class="a4-model-content2">
            <div>
              {{ type_no }}
            </div>
            <div>
              {{ type_name }}
            </div>
            <div>{{ colour_number }}({{ colour }})</div>
            <div>
              {{ factory_name }}
            </div>
            <div>
              {{ createtime }}
            </div>
          </div>
          <div class="a4-opinionTow">
              <div class="a4-opinionTow-image">
                <el-image :src="wear_image[0]" fit="contain" :preview-src-list="[wear_image[0]]"></el-image>
              </div>
              <div>
                <div class="a4-opinionTow-tabletitle">
                  <div>流程</div>
                  <div>负责人签字</div>
                  <!-- <div>意见反馈</div> -->
                </div>
                <div
                  class="a4-opinionTow-tablelist"
                  v-for="(item, index) in list"
                  :key="index"
                >
                  <div>{{ item.title }}</div>
                  <div></div>
                  <!-- <div></div> -->
                </div>
              </div>
            </div>
          <div class="a4-model-list">
            <div class="a4-model-list-one">商品封样报告部位表，单位cm</div>
            <div class="a4-model-list-tabletitle">
              <div>部位</div>
              <div>测量方法</div>
              <div>工艺尺寸({{ size }})</div>
              <div>封样尺寸({{ size }})</div>
              <div>误差</div>
              <div>版实长</div>
            </div>
            <template v-for="(item, index) in position_list">
              <div
                class="a4-model-list-tablelist"
                :key="index"
                v-if="item.is_new == 1"
              >
                <div>{{ item.position_title }}</div>
                <div>{{ item.position_method }}</div>
                <div>{{ item.code_list[size] }}</div>
                <div>{{ item.seal_code }}</div>
                <div>{{ item.tolerance }}</div>
                <div>{{ item.sample_code }}</div>
              </div>
            </template>
          </div>
          <div class="a4-model-text">
            <div>面、辅料、版型结果以设计师签字为准</div>
            <div>用线：通过</div>
            <div>针距：通过</div>
          </div>
        </div>
      </div>
      <div>
        <div class="a4-opinion">
          <div class="a4-opinion-title">修改意见</div>
          <div
            class="a4-opinion-content"
            v-for="(item, index) in modification_comments"
            :key="index"
          >
            <div class="a4-opinion-content-two" v-if="item.images.length">
              <div class="a4-model-content-two-image">
                <el-image :src="item.images[0].url" fit="contain" :preview-src-list="[item.images[0].url]"></el-image>
              </div>
              <div>
                {{ item.content }}
              </div>
            </div>
            <div class="a4-opinion-content-one" v-else>
              {{ item.content }}
            </div>
          </div>
          <div class="a4-opinion-other">
            <!-- <div class="a4-opinion-other-title">其他事项</div> -->
            <div class="a4-opinion-other-content">
              <div>
                <!-- <div></div> -->
                <div>说明：{{ other_matters.explain }}</div>
              </div>
              <div>
                <!-- <div></div> -->
                <div>
                  备注：{{ other_matters.remark }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="opacity: 0; position: fixed; top: 0; z-index: -1">
      <div class="a4" id="printMeP">
        <div style="height: 300mm">
          <div class="a4-title">封样报告</div>
          <div class="a4-model">
            <!-- <div class="a4-model-content">
              <div class="a4-model-content-one">
                <el-image
                  class="a4-model-content-one-image"
                  :src="wear_image[0]"
                  fit="contain"
                ></el-image>
              </div>
              <div class="a4-model-content-two">
                <div class="a4-model-content-two-top">
                  <div>{{ type_no }}</div>
                  <div>品名:{{ type_name }}</div>
                </div>
                <div class="a4-model-content-two-bottom">
                  <div>{{ colour_number }}({{ colour }})</div>
                  <div>{{ factory_name }}</div>
                  <div>更新时间：{{ createtime }}</div>
                </div>
              </div>
            </div> -->
            <div class="a4-model-content2">
              <div>
                {{ type_no }}
              </div>
              <div>
                {{ type_name }}
              </div>
              <div>{{ colour_number }}({{ colour }})</div>
              <div>
                {{ factory_name }}
              </div>
              <div>
                {{ createtime }}
              </div>
            </div>
            <div class="a4-opinionTow">
              <div class="a4-opinionTow-image">
                <el-image :src="wear_image[0]" fit="contain" :preview-src-list="[wear_image[0]]"></el-image>
              </div>
              <div>
                <div class="a4-opinionTow-tabletitle">
                  <div>流程</div>
                  <div>负责人签字</div>
                  <!-- <div>意见反馈</div> -->
                </div>
                <div
                  class="a4-opinionTow-tablelist"
                  v-for="(item, index) in list"
                  :key="index"
                >
                  <div>{{ item.title }}</div>
                  <div></div>
                  <!-- <div></div> -->
                </div>
              </div>
            </div>
            <div class="a4-model-list">
              <div class="a4-model-list-one">商品封样报告部位表，单位cm</div>
              <div class="a4-model-list-tabletitle">
                <div>部位</div>
                <div>测量方法</div>
                <div>工艺尺寸({{ size }})</div>
                <div>封样尺寸({{ size }})</div>
                <div>误差</div>
                <div>版实长</div>
              </div>
              <template v-for="(item, index) in position_list">
                <div
                  class="a4-model-list-tablelist"
                  :key="index"
                  v-if="item.is_new == 1"
                >
                  <div>{{ item.position_title }}</div>
                  <div>{{ item.position_method }}</div>
                  <div>{{ item.code_list[size] }}</div>
                  <div>{{ item.seal_code }}</div>
                  <div>{{ item.tolerance }}</div>
                  <div>{{ item.sample_code }}</div>
                </div>
              </template>
              <template>
                <div
                  v-for="item in num"
                  class="a4-model-list-tablelist"
                  :key="item"
                >
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </template>
            </div>
            <div class="a4-model-text">
              <div>面、辅料、版型结果以设计师签字为准</div>
              <div>用线：通过</div>
              <div>针距：通过</div>
            </div>
          </div>
        </div>
        <div style="height: 270mm">
          <div class="a4-opinion">
            <div class="a4-opinion-content2">
              <div>
                {{ type_no }}
              </div>
              <div>
                {{ type_name }}
              </div>
              <div>{{ colour_number }}({{ colour }})</div>
              <div>
                {{ factory_name }}
              </div>
              <div>
                {{ createtime }}
              </div>
            </div>
            <div class="a4-opinion-title">修改意见</div>
            <div
              class="a4-opinion-content"
              v-for="(item, index) in modification_comments"
              :key="index"
            >
              <div class="a4-opinion-content-two" v-if="item.images.length">
                <div class="a4-model-content-two-image">
                  <el-image :src="item.images[0].url" fit="contain" :preview-src-list="[item.images[0].url]"></el-image>
                </div>
                <div>
                  {{ item.content }}
                </div>
              </div>
              <div class="a4-opinion-content-one" v-else>
                {{ item.content }}
              </div>
            </div>
            <div class="a4-opinion-other">
              <!-- <div class="a4-opinion-other-title">其他事项</div> -->
              <div class="a4-opinion-other-content">
                <div>
                  <!-- <div></div> -->
                  <div>说明：{{ other_matters.explain }}</div>
                </div>
                <div>
                  <!-- <div></div> -->
                  <div>
                    备注：{{ other_matters.remark }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisibleImage">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import {
  postAdminOperateLook_new_products_plank_house,
  postHomeCodeGetFactory,
  postAdminUserUserlist,
  postAdminOperateset_sealed_sample_report,
  postAdminOperateget_sealed_sample_report_detail,
} from "@/api";
import { floatSub } from "@/utils/algorithm.js";
export default {
  data() {
    return {
      loading: false,
      factoryList: [],
      userlist: [],
      dialogVisibleImage: false,
      dialogImageUrl: "",
      num: 0,
      id: "",
      type_no: "",
      type_name: "",
      supplier_id: "",
      order_processor: "",
      wear_image: [],
      colour_number: "",
      colour: "",
      size: "",
      position_list: [],
      factory_name: "",
      createtime: "",
      modification_comments: [{ content: "", images: [] }], //修改意见
      other_matters: {
        explain: "改正以上问题，可生产大货  封样报告一起送仓库",
        remark:
          "大货生产前工艺单、样衣、色卡，纸样互对，如有疑问需在开裁前及时与我公司技术部联系，未经我公司同意不得擅自更改。如有绣花、印花、压皱、打条、切割大货生产中请检查，如有问题及时联系，如果生产结束发现问题造成损失一切后果由工厂承担！！！",
      },
      list: [
        {
          title: "封样检查",
        },
        {
          title: "版型确认",
        },
        {
          title: "主面料确认",
        },
        {
          title: "配面料1",
        },
        {
          title: "配面料2",
        },
        {
          title: "大身绣花确认",
        },
        {
          title: "其他部位",
        },
        {
          title: "印花确认",
        },
        {
          title: "辅料确认",
        },
        {
          title: "生产大货确认",
        },
      ],
    };
  },
  async activated() {
    this.loading = true;
    // await this.postHomeCodeGetFactory();
    // await this.postAdminUserUserlist();
    this.id = this.$route.query.id;
    await this.postAdminOperateget_sealed_sample_report_detail(
      this.$route.query.id
    );
    this.loading = false;
  },
  methods: {
    async postAdminOperateget_sealed_sample_report_detail(id) {
      let obj = {
        id,
      };
      try {
        let res = await postAdminOperateget_sealed_sample_report_detail(obj);
        let data = res.data;
        this.wear_image = data.wear_image;
        this.type_name = data.type_name;
        this.type_no = data.type_no;
        this.colour_number = data.colour_number;
        this.colour = data.colour;
        this.supplier_id = data.supplier_id;
        this.order_processor = data.order_processor;
        this.position_list = data.position_list;
        this.modification_comments = data.modification_comments;
        this.other_matters = data.other_matters;
        this.factory_name = data.factory_name;
        this.createtime = data.createtime;
        let keys = Object.keys(data.position_list[0].code_list);
        this.size = keys[0];
        let num = 0;
        let position_list = data.position_list;
        for (let index = 0; index < position_list.length; index++) {
          if (position_list[index].is_new == 1) {
            num += 1;
          }
        }
        if (20 - num > 0) {
          this.num = 20 - num;
        }
      } catch (error) {}
    },
    // 提交
    async onClickSubmit() {
      this.loading = true;
      let {
        type_no,
        colour_number,
        colour,
        supplier_id,
        order_processor,
        position_list,
        modification_comments,
        other_matters,
        id,
      } = this;
      let is = position_list.some((e) => {
        return e.is_new && !e.seal_code;
      });
      if (is) {
        this.$message.warning(
          "所勾选的部位未编辑封样尺寸，请填写后再进行保存！"
        );
        this.loading = false;
      } else {
        let obj = {
          type_no,
          colour_number,
          colour,
          supplier_id,
          order_processor,
          position_list,
          modification_comments,
          other_matters,
        };
        if (id) {
          obj.id = id;
        }
        try {
          this.$confirm(
            "保存前“请注意勾选封样报告用到的部位”，否则下载的封样报告会缺失此信息！",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(async () => {
              let res = await postAdminOperateset_sealed_sample_report(obj);
              this.$message.success("成功");
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } catch (error) {
          this.loading = false;
        }
      }
    },
    // 用户列表
    async postAdminUserUserlist() {
      let obj = {
        size: 100000,
        page: 1,
      };
      postAdminUserUserlist(obj).then((res) => {
        this.userlist = res.data;
      });
    },
    // 加工厂列表
    postHomeCodeGetFactory() {
      let obj = {
        page: 1,
        size: 1000,
      };
      postHomeCodeGetFactory(obj).then((res) => {
        this.factoryList = res.data;
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisibleImage = true;
    },
    onDelete(index) {
      let { modification_comments } = this;
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        modification_comments.splice(index, 1);
        this.modification_comments = modification_comments;
      });
    },
    handleSuccess(response, index, idx) {
      let { modification_comments } = this;
      let obj = {
        name: "图片",
        url: response.img,
      };
      modification_comments[idx].images.push(obj);
      this.modification_comments = modification_comments;
    },
    handleRemoves(file, idx) {
      let { modification_comments } = this;
      let index = modification_comments[idx].images.findIndex(
        (e) => e.url == file.url
      );
      modification_comments[idx].images.splice(index, 1);
      this.modification_comments = modification_comments;
      return true;
    },
    onUpdate() {
      let { modification_comments } = this;
      let obj = {
        content: "",
        images: [],
      };
      modification_comments.push(obj);
      this.modification_comments = modification_comments;
    },
    async onInput(e, row, index) {
      e = e.replace(/[^0-9.]/g, "");
      let { position_list, size } = this;
      let tmpObj = position_list[index];
      tmpObj.tolerance = floatSub(e, tmpObj.code_list[size]);
      this.$set(this.position_list, index, tmpObj);
    },
    async postAdminOperateLook_new_products_plank_house(type_no) {
      let obj = {
        type_no,
      };
      let res = await postAdminOperateLook_new_products_plank_house(obj);
      let data = res.data;
      this.type_name = data.type_name;
      this.wear_image = data.wear_image;
      let code_list = data.plank_house_table_title.code_list;
      let size = "";
      for (let index = 0; index < code_list.length; index++) {
        if (code_list[index].is) {
          size = code_list[index].size_code.title;
        }
      }
      this.size = size;
      let position_list = data.plank_house_table_data;
      let tableData = [];
      for (let index = 0; index < position_list.length; index++) {
        let dataindex = position_list[index];
        let obj = {
          is_new: 0,
          position_title: dataindex.position_title,
          position_method: dataindex.position_method,
          code_list: {},
          sample_code: dataindex.sample_code,
          seal_code: "",
          tolerance: "",
        };
        obj.code_list[size] = dataindex.code_list[size];
        tableData.push(obj);
      }
      this.position_list = tableData;
    },
  },
};
</script>

<style lang="scss" scoped>
.fileimg {
  width: 80px;
  height: 80px;
  line-height: 84px;
}
.fybgadd {
  font-size: 14px;
  padding: 10px 20px;
  /deep/ .el-upload--picture-card {
    width: 80px;
    height: 80px;
    line-height: 84px;
  }
  /deep/ .el-upload-list--picture-card .el-upload-list__item {
    width: 80px;
    height: 80px;
    line-height: 84px;
  }
}
.a4 {
  width: 210mm;
  background: #fff;
  padding-top: 2mm;
  font-size: 12px;
  .a4-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    padding: 2mm 0;
  }
  .a4-model {
    width: 200mm;
    margin: 0 auto;
    border: 0.1mm solid #000000;
    .a4-model-content2 {
      display: flex;
      > div {
        width: 100%;
        height: 10mm;
        text-align: center;
        line-height: 10mm;
      }
      > div:not(:nth-child(1)) {
        border-left: 0.1mm solid #000000;
      }
    }
    .a4-model-content {
      display: flex;
      .a4-model-content-one {
        width: 30mm;
        height: 30mm;
        border-right: 0.1mm solid #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        .a4-model-content-one-image {
          width: 20mm;
          height: 20mm;
        }
      }
      .a4-model-content-two {
        .a4-model-content-two-top {
          width: 170mm;
          border-bottom: 0.1mm solid #000000;
          display: flex;
          > div:nth-child(1) {
            width: 50mm;
            height: 15mm;
            text-align: center;
            line-height: 15mm;
            border-right: 0.1mm solid #000000;
          }
          > div:nth-child(2) {
            width: 120mm;
            height: 15mm;
            text-align: center;
            line-height: 15mm;
          }
        }
        .a4-model-content-two-bottom {
          display: flex;
          > div:nth-child(1) {
            width: 50mm;
            height: 15mm;
            text-align: center;
            line-height: 15mm;
            border-right: 0.1mm solid #000000;
          }
          > div:nth-child(2) {
            width: 50mm;
            height: 15mm;
            text-align: center;
            line-height: 15mm;
            border-right: 0.1mm solid #000000;
          }
          > div:nth-child(3) {
            width: 69mm;
            height: 15mm;
            text-align: center;
            line-height: 15mm;
          }
        }
      }
    }
    .a4-model-list {
      .a4-model-list-one {
        text-align: center;
        line-height: 8mm;
        height: 8mm;
        border-top: 0.1mm solid #000000;
      }
      .a4-model-list-tabletitle {
        display: flex;
        border-top: 0.1mm solid #000000;
        font-weight: 600;
        > div {
          width: 30mm;
          height: 8mm;
          text-align: center;
          line-height: 8mm;
        }
        > div:nth-child(2) {
          width: 80mm;
        }
        > div:nth-child(1) {
          width: 50mm;
        }
        > div:not(:nth-last-child(1)) {
          border-right: 0.1mm solid #000000;
        }
      }
      .a4-model-list-tablelist {
        display: flex;
        border-top: 0.1mm solid #000000;
        > div {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 30mm;
          min-height: 6mm;
        }
        > div:nth-child(2) {
          width: 80mm;
        }
        > div:nth-child(1) {
          width: 50mm;
        }
        > div:not(:nth-last-child(1)) {
          border-right: 0.1mm solid #000000;
        }
      }
    }
    .a4-model-text {
      display: flex;
      border-top: 0.1mm solid #000000;
      > div {
        height: 8mm;
        line-height: 8mm;
        text-align: center;
        width: 60mm;
      }
      > div:not(:nth-last-child(1)) {
        border-right: 0.1mm solid #000000;
      }
      > div:nth-child(1) {
        width: 80mm;
      }
    }
  }
  .a4-opinionTow {
    display: flex;
    width: 199mm;
    margin: 0 auto;
    border-top: 0.1mm solid #000000;
    .a4-opinionTow-image {
      width: 109mm;
      height: 86mm;
      display: flex;
      align-items: center;
      > .el-image {
        width: 109mm;
        height: 86mm;
      }
    }
    .a4-opinionTow-tablelist {
      display: flex;
      border-top: 0.1mm solid #000000;
      border-left: 0.1mm solid #000000;
      height: 8mm;
      > div {
        line-height: 8mm;
        text-align: center;
      }
      > div:not(:nth-last-child(1)) {
        border-right: 0.1mm solid #000000;
      }
      > div:nth-child(1) {
        width: 45mm;
      }
      > div:nth-child(2) {
        width: 45mm;
      }
      > div:nth-child(3) {
        width: 40mm;
      }
    }
    .a4-opinionTow-tabletitle {
      display: flex;
      border-left: 0.1mm solid #000000;
      height: 8mm;
      font-weight: 600;
      font-size: 12px;
      > div {
        line-height: 8mm;
        text-align: center;
      }
      > div:not(:nth-last-child(1)) {
        border-right: 0.1mm solid #000000;
      }
      > div:nth-child(1) {
        width: 45mm;
      }
      > div:nth-child(2) {
        width: 45mm;
      }
      > div:nth-child(3) {
        width: 40mm;
      }
    }
  }
  .a4-opinion {
    width: 200mm;
    margin: 0 auto;
    border: 0.1mm solid #000000;
    margin-top: 2mm;
    .a4-opinion-content2 {
      display: flex;
      border-bottom: 0.1mm solid #000000;
      > div {
        width: 100%;
        height: 10mm;
        text-align: center;
        line-height: 10mm;
      }
      > div:not(:nth-child(1)) {
        border-left: 0.1mm solid #000000;
      }
    }
    .a4-opinion-title {
      text-align: center;
      height: 8mm;
      line-height: 8mm;
      font-weight: 600;
    }
    .a4-opinion-content {
      border-top: 0.1mm solid #000000;
      .a4-opinion-content-one {
        padding: 2mm;
      }
      .a4-opinion-content-two {
        // border-top: 0.1mm solid #000000;
        display: flex;
        .a4-model-content-two-image {
          width: 60mm;
          border-right: 0.1mm solid #000000;
          display: flex;
          align-items: center;
          justify-content: center;
          > .el-image {
            width: 50mm;
            height: 50mm;
          }
        }
        > div:nth-child(2) {
          width: 100%;
          padding: 2mm;
        }
      }
    }
    .a4-opinion-other {
      display: flex;
      border-top: 0.1mm solid #000000;
      .a4-opinion-other-title {
        text-align: center;
        min-height: 30mm;
        width: 60mm;
        line-height: 30mm;
        border-right: 0.1mm solid #000000;
        font-weight: 600;
      }
      .a4-opinion-other-content {
        > div {
          padding: 1mm;
        }
        > div:nth-child(1) {
          height: 7mm;
        }
        > div:nth-child(2) {
          border-top: 0.1mm solid #000000;
        }
      }
    }
  }
}
</style>